<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>编辑用户挂号信息</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="add"
        >保存</el-button
      >
    </div>
    <el-form
      :model="userForm"
      :rules="rules"
      label-position="left"
      ref="userForm"
      label-width="100px"
      class="demo-userForm"
    >
      <el-form-item label="患者姓名" prop="userName">
        <el-input
          v-model="userForm.userName"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>

      <el-form-item label="就诊卡号" prop="ElCard">
        <el-input v-model="userForm.ElCard" placeholder="请输入内容"></el-input>
      </el-form-item>

      <el-form-item label="身份证号" prop="userId">
        <el-input v-model="userForm.userId" placeholder="请输入内容"></el-input>
      </el-form-item>

      <el-form-item label="手机号码" prop="telephone">
        <el-input
          v-model="userForm.telephone"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>

      <el-form-item label="挂号科室" prop="value">
        <div class="block">
          <el-cascader
            v-model="userForm.value"
            :options="options"
          ></el-cascader>
        </div>
      </el-form-item>

      <el-form-item label="挂号类型" prop="type">
        <el-switch
          v-model="userForm.type"
          active-text="专家号"
          inactive-text="普通号"
        >
        </el-switch>
      </el-form-item>

      <el-form-item label="挂号费" prop="free">
        <el-input-number
          v-model="userForm.free"
          :min="60.0"
          :max="60"
          label="描述文字"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="挂号状态" prop="type2Value">
        <el-select v-model="type2.value" placeholder="请选择">
          <el-option
            v-for="item in type2.options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="就诊日期" prop="VisitData">
        <div class="block">
          <el-date-picker
            v-model="userForm.VisitData"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label=" 候诊时间" prop="waitData">
        <el-time-select
          v-model="userForm.waitData"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30',
          }"
          placeholder="选择时间"
        >
        </el-time-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import { getUserList, addUser, updataUserData } from "@/api/titleManagement";

import createDate from "@/utils/createDate";

import axios from "axios";
import { nanoid } from "nanoid";

export default {
  name: "Formuser",
  props: [],
  data() {
    return {
      userForm: {
        userName: "",
        ElCard: "",
        userId: "",
        telephone: "",
        // ui组件的
        VisitData: "",
        waitData: "",
        type: true,
        value: [],
        free: 60,
      },
      // ui组件的
      //挂号科室
      options: [
        {
          value: "内科",
          label: "内科",
          children: [
            {
              value: "消化内科",
              label: "消化内科",
            },
            {
              value: "血液内科",
              label: " 血液内科",
            },
            {
              value: "风湿免疫内科 ",
              label: "风湿免疫内科 ",
            },
            {
              value: "肾内科 ",
              label: " 肾内科",
            },
          ],
        },
        {
          value: "外科",
          label: "外科",
          children: [
            {
              value: "消化外科",
              label: "消化外科",
            },
            {
              value: "血液外科",
              label: " 血液外科",
            },
            {
              value: "风湿免疫外科 ",
              label: "风湿免疫外科 ",
            },
            {
              value: "肾外科 ",
              label: " 肾外科",
            },
          ],
        },
      ],
      //挂号状态
      type2: {
        options2: [
          {
            value: "待就诊",
            label: "待就诊",
          },
          {
            value: "已就诊",
            label: "已就诊",
          },
          {
            value: "已取消",
            label: "已取消",
          },
        ],
        value: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入职称名称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        ElCard: [
          { required: true, message: "请输入就诊卡号", trigger: "blur" },
          {
            min: 10,
            max: 20,
            message: "长度在 10 到 20 个字符",
            trigger: "blur",
          },
        ],
        userId: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            min: 18,
            max: 19,
            message: "长度在 18 到 19 个字符",
            trigger: "blur",
          },
        ],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "长度在 11  个字符",
            trigger: "blur",
          },
        ],
        value: [{ required: true, trigger: "blur" }],
        type: [{ required: true, trigger: "blur" }],
        free: [{ required: false, trigger: "blur" }],
        type2Value: [{ required: true, trigger: "blur" }],
        VisitData: [{ required: true, trigger: "change" }],
        waitData: [{ required: true, trigger: "change" }],
      },
    };
  },
  // methods: {
  //   add() {
  //     console.log(this.userForm);
  //   },
  //   // 判断是添加用户 还是更新用户 方法
  //   isAdd() {
  //     if (this.$route.params.type == "updata") {
  //       this.type = false;
  //       let __userFObj = this.$route.params._userObj;

  //       this.userForm.userName = __userFObj.userName;
  //       this.userForm.ElCard = __userFObj.ElCard;
  //       this.userForm.userId = __userFObj.userId;
  //       this.userForm.telephone = __userFObj.telephone;
  //       this.userForm.value = __userFObj.value;
  //       this.userForm.value = __userFObj.value;
  //       // this. userForm.value =  __userFObj.value
  //       // this. userForm.value =  __userFObj.value
  //       // this. userForm.value =  __userFObj.value
  //     } else {
  //       this.type = true;
  //     }
  //   },

  //   async submitForm() {
  //     // 判断是添加用户 还是更新用户
  //     if (this.type) {
  //       // 自定义方法 生成时间 yyyy-MM-dd  hh:mm:ss
  //       if (
  //         this.userForm.userName.trim() != "" &&
  //         this.userForm.name.trim() != "" &&
  //         this.userForm.cost.trim() != "" &&
  //         this.userForm.proDescribe.trim() != ""
  //       ) {
  //         let time = new Date();
  //         let nowTime = createDate(
  //           time.toLocaleString("en-US", { hour12: false }).split(" ")
  //         );

  //         let _obj = {
  //           userId: nanoid(),
  //           userName: this.userForm.userName,
  //           name: this.userForm.name,
  //           cost: this.userForm.cost,
  //           proDescribe: this.userForm.proDescribe,
  //           setMealState: this.userForm.setMealState,
  //           addDate: nowTime,
  //           isChecked: false,
  //           isdelete: 0,
  //         };
  //         // 添加用户
  //         await addUser(_obj);
  //         this.$message({
  //           message: "添加成功",
  //           type: "success",
  //         });
  //         this.$router.push("/titlemanag");
  //       } else {
  //         this.$message({
  //           message: "请不要输入空内容",
  //           type: "error",
  //         });
  //       }
  //     } else {
  //       // console.log('更新');
  //       // console.log(this. userForm);

  //       if (
  //         this.userForm.userName.trim() != "" &&
  //         this.userForm.name.trim() != "" &&
  //         this.userForm.cost.trim() != "" &&
  //         this.userForm.proDescribe.trim() != ""
  //       ) {
  //         let time = new Date();
  //         let nowTime = createDate(
  //           time.toLocaleString("en-US", { hour12: false }).split(" ")
  //         );
  //         this.userForm.addDate = nowTime;
  //         await updataUserData(
  //           this.$route.params._userObj.userId,
  //           this.userForm
  //         );
  //         this.$message({
  //           message: "更新成功",
  //           type: "success",
  //         });
  //         this.$router.push("/titlemanag");
  //       } else {
  //         this.$message({
  //           message: "请不要输入空内容",
  //           type: "error",
  //         });
  //       }
  //     }
  //   },
  //   // 取消按钮
  //   resetForm(formName) {
  //     if (this.type) {
  //       this.userForm = {
  //         name: "",
  //         cost: "",
  //         delivery: false,
  //         proDescribe: "",
  //       };
  //     } else {
  //       this.$router.push("/titlemanag");
  //     }
  //   },
  // },
  // mounted() {
  //     // 判断是添加用户 还是更新用户
  //     this.isAdd()

  // },
};
</script>

<!-- <style>
.text {
  /* border: 1px solid darkred; */
  padding: 10px 0 20px 20px;
  font-size: 20px;
  color: rgb(49, 46, 46);
  display: flex;
}
.text .red {
  color: rgb(235, 122, 122);
  margin-right: 10px;
  font-size: 30px;
}
.item input {
  border: 1px solid rgb(194, 194, 241);
  width: 250px;
  padding-left: 10px;
  font-size: 20px;
  border-radius: 5px;
  height: 35px;
}
</style> -->
